import { App, Directive } from 'vue'
import { Position, useDraggable } from '@vueuse/core'

/**
 * 拖拽指令
 */
const draggableDirective: Directive = {
  mounted(el: HTMLElement) {
    useDraggable(el, {
      preventDefault: true,
      onMove(position: Position) {
        el.style.top = `${position.y}px`
        el.style.left = `${position.x}px`
      }
    })
    el.style.position = 'absolute'
  }
}
const directive = {
  install(app: App) {
    app.directive('draggable', draggableDirective)
  }
}

export default directive
